<template>
    <div class="right-bottom">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" >
              <div class="left">
                <img class="left-img" src="" alt="">
              </div>
            </el-table-column>
            <el-table-column prop="name">
              <div class="left-text">
                <div class="lt-top" style="border-bottom: 20px;">九儿背面完整版</div>
                <div class="lt-center">动态</div>
                <div class="lt-bottom">
                  <img class="img" src="" alt="">
                  <span class="userName">121435314514</span>
                </div>
              </div>
            </el-table-column>
            <el-table-column prop="address" >33</el-table-column>
            <el-table-column prop="address" >44</el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import type { HistoryItem } from "@/api/trainingRoom";

const props=defineProps<{
    htItem:HistoryItem
}>()

const tableData = [
    {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },

];
</script>

<style lang="scss" scoped>
.right-bottom{
  width: 100%;
  height: 120px;
  padding: 0 20px;
  margin: 0 auto;
  background-color: #faf;
  .left{
    background-color: bisque;
    width: 200px;
    height: 120px;
    border-radius:5% ;
    .left-img{
      width: 100%;
      height: 100%;
    }
  .left-text{
    .lt-top{
      padding: 20px;
    }
  }
  }
}
:deep(.el-table .el-table__cell){
  padding: 0;
}
:deep(.el-table th.el-table__cell.is-leaf){
  border-bottom: none;
}
</style>
